// 开班补课
<template>
  <el-drawer
    v-model="open"
    title="开班补课"
    :with-header="true"
    size="90%"
    class="open-class-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <div class="content">
      <el-form label-width="auto" :model="form" ref="openRef">
        <el-form-item
          label="补课课程"
          prop="courseId"
          :rules="[
            {
              required: true,
              message: '请选择课程',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            style="width: 320px"
            v-model="form.courseId"
            placeholder="课程"
            clearable
            @change="changeCourse"
          >
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.state === '1' ? item.name + '(已停用)' : item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>补课成员</span>
          </div>
        </template>
        <MemberMakeupList
          ref="makeuplistRef"
          :data="form"
          @setItemsValues="setItemsValues"
        />
      </el-card>
    </div>
    <RollCallMake
      ref="makeRef"
      from="openclass"
      :isVip="newClass.isVip"
      :classId="newClass.id"
      @refreshPage="closeAndRefresh"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeW()">取消</el-button>
        <el-button type="primary" @click="handleSubmit()"> 开班 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import MemberMakeupList from "@/views/registrar/class/detail/components/memberMakeupList.vue";
import RollCallMake from "@/views/registrar/class/detail/components/rollCallMake.vue";
import { getCourseListAPI } from "@/api/registrar/course";
import { updateMakeupClassAPI } from "@/api/registrar/class";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["refreshPage"]);
const loading = ref(false);
const open = ref(false);
const makeuplistRef = ref(null);
const makeRef = ref(null);
const courseList = ref([]);

const data = reactive({
  form: {
    courseId: null,
  },
  newClass: {
    id: null,
    name: null,
    isVip: null,
  },
  items: [],
});
const { form, newClass, items } = toRefs(data);

// 事件-----------------------------------------------------------------------------------------
function openW() {
  open.value = true;
  getCourseList();
  nextTick(function () {
    makeuplistRef.value.initPage();
  });
}

function closeW() {
  form.value.courseId = null;
  items.value = [];
  proxy.resetForm("openRef");
  open.value = false;
}

function closeAndRefresh() {
  closeW();
  refreshParent();
}

function setItemsValues(value) {
  items.value = value;
}

function refreshParent() {
  emits("refreshPage");
}

function changeCourse(value) {
  makeuplistRef.value.initPage();
}

function handleSubmit() {
  proxy.$refs["openRef"].validate((valid) => {
    if (valid) {
      if (items.value.length === 0) {
        proxy.$modal.msgError("补课成员不能为空");
        return;
      }
      updateMakeupClass();
    } else {
      proxy.$modal.msgError("请选择补课课程");
    }
  });
}

// 方法-----------------------------------------------------------------------------------------
// 课程
function getCourseList() {
  loading.value = true;
  getCourseListAPI({
    pageSize: 9999,
    pageNum: 1,
    state: "0",
    open: "1",
  }).then((response) => {
    courseList.value = response.rows;
    loading.value = false;
  });
}

function updateMakeupClass() {
  const selected = courseList.value.filter((course) => {
    return course.id === form.value.courseId;
  })[0];
  loading.value = true;
  updateMakeupClassAPI({
    courseId: form.value.courseId,
    courseName: selected.name,
    isVip: selected.lessonType,
  }).then((response) => {
    loading.value = false;
    //
    newClass.value = response.data; //id是新的班级id；name；classHour
    handleRollCall({
      courseId: form.value.courseId,
      classHour: response.data.classHour,
      studentList: items.value,
    });
  });
}

function handleRollCall(row) {
  nextTick(function () {
    makeRef.value.handleOpen(row);
  });
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
